<template>
  <div class="app-container">
    <!--查询-->
    <div class="start">
      <el-form ref="queryForm" size="small" :model="queryParams">
        <div class="switch" :class="{ 'active': queryParams.handle == 'PendingForShelf' ? true : false }"
          @click="handleListing('PendingForShelf')">待上架
        </div>
        <div class="switch" :class="{ 'active': queryParams.handle == 'PendingForShelf' ? false : true }"
          @click="handleListing('PendingForRemoval')">待下架
        </div>
        <el-row type="flex" style="width:82%;flex-wrap:wrap;">
          <el-col style="margin-right: 10px;width:180px;margin-bottom:10px;">
            <el-form-item prop="phoneNumber">
              <el-input v-model="queryParams.phoneNumber" placeholder="绑定手机：请输入手机号" clearable
                @keyup.enter.native="getList(1)" />
            </el-form-item>
          </el-col>

          <el-col style="margin-right: 10px;width:180px;margin-bottom:10px;">
            <el-form-item prop="account">
              <el-input v-model="queryParams.account" placeholder="账号：请输入账号" clearable @keyup.enter.native="getList(1)" />
            </el-form-item>
          </el-col>

          <el-col style="margin-right: 10px;width:180px;margin-bottom:10px;">
            <el-form-item prop="orderNumber">
              <el-input v-model="queryParams.orderNumber" placeholder="回收编号：请输入回收编号" clearable
                @keyup.enter.native="getList(1)" />
            </el-form-item>
          </el-col>

          <el-col style="margin-right: 10px;width:180px;margin-bottom:10px;">
            <el-form-item prop="shelfNumber">
              <el-input v-model="queryParams.shelfNumber" placeholder="上架编号：请输入上架编号" clearable
                @keyup.enter.native="getList(1)" />
            </el-form-item>
          </el-col>

          <el-col style="margin-right: 10px;width:180px;margin-bottom:10px;">
            <el-form-item prop="recycleName">
              <el-select filterable v-model="queryParams.recycleName" clearable placeholder="回收客服：请选择回收客服"
                @change="getList(1)">
                <el-option v-for="item in recycleList" :key="item.userId" :label="item.userName" :value="item.userName" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col style="margin-right: 10px;width:180px;margin-bottom:10px;">
            <el-form-item prop="changeName">
              <el-select filterable v-model="queryParams.changeName" clearable placeholder="换绑客服：请选择换绑客服"
                @change="getList(1)">
                <el-option v-for="item in changeList" :key="item.userId" :label="item.userName" :value="item.userName" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col style="margin-right: 10px;width:180px;margin-bottom:10px;">
            <el-form-item prop="supplier">
              <el-input v-model="queryParams.supplier" placeholder="供货商家：请输供货商家" clearable
                @keyup.enter.native="getList(1)" />
            </el-form-item>
          </el-col>

        </el-row>
        <div class="btns">
          <!--刷新-->
          <div class="wrap" @click="getList('')">
            <img src="../../../assets/images/refresh.png" />
          </div>

          <!--重置-->
          <div class="wrap" @click="resetQuery">
            <img src="../../../assets/images/search.png" />
          </div>
        </div>
      </el-form>

      <!--单选分类查询-->
      <el-radio-group v-model="queryParams.dictCodeId" @input="getList(1)">
        <el-radio label="">全部</el-radio>
        <el-radio v-for="item in gameList" :label="item.dictCode" :key="item.dictCode">{{ item.dictLabel }}<span
            class="el-badge__content"
            v-if="totalCount.countByDictCodeId && totalCount.countByDictCodeId[item.dictCode]">{{
              totalCount.countByDictCodeId[item.dictCode]
            }}</span>
        </el-radio>
      </el-radio-group>
    </div>

    <!--工具栏-->
    <div class="tool">
      <span class="tag">待处理账号管理列表</span>
      <div class="tool-btn">
        <div class="tool-btn-item" @click="upandDownShelves" v-hasPermi="['business:handleAccount:listUpdateStatus']">
          一键上架
        </div>
        <div class="tool-btn-item" style="margin: 0 10px;" @click="patchUp"
          v-hasPermi="['business:automatic_shelves:bulk_listings']">批量上架
        </div>
        <div class="tool-btn-item" style="margin: 0 10px;" @click="patchDown"
          v-hasPermi="['business:automatic_shelves:bulk_delisting']">批量下架
        </div>
        <el-button type="primary" @click="handleExport">导出</el-button>
      </div>
    </div>

    <!--表格-->
    <el-table v-loading="loading" :data="managementList" @selection-change="handleSelectionChange" stripe>
      <el-table-column type="selection" width="70" align="center" />
      <el-table-column label="编号" align="center" width="60">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="账号描述" min-width="200" align="center" prop="accountDescription"
        :show-overflow-tooltip="true" />
      <el-table-column label="账号" align="center" prop="account" min-width="100" :show-overflow-tooltip="true" />
      <el-table-column label="密码" align="center" prop="password" min-width="100" />
      <el-table-column label="账号编号" align="center" prop="identifying" min-width="100" />
      <el-table-column label="销售金额" align="center" prop="saleAmount" min-width="100" />
      <el-table-column label="换绑客服" align="center" prop="changeName" min-width="100" />
      <el-table-column label="供货商家" align="center" prop="supplier" min-width="80" />
      <el-table-column label="入库时间" align="center" prop="storageTime" min-width="170" />
      <el-table-column label="上架编号" min-width="150" align="center" prop="shelfNumber">
        <template v-slot="scope">
          <el-popover trigger="hover" placement="top" class="custom-popover">
            <div v-if="scope.row.shelfNumber != null">
              <shelf-number-row v-for="(line, index) in scope.row.shelfNumber.split(/\n/g)" :key="index" :line="line" />
            </div>
            <div slot="reference" class="hover-slot-line">{{ scope.row.shelfNumber }}
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="信息" align="center" prop="shelfMsg" min-width="160" :show-overflow-tooltip="true" />
      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="180">
        <template slot-scope="scope">
          <div v-if="scope.row.handle == 'PendingForRemoval'">
            <template>
              <el-popconfirm title="您确定下架吗？" @confirm="handleDelist(scope.row)">
                <el-button slot="reference" size="mini" type="text" v-hasPermi="['business:handleAccount:putshelves']">
                  <span style="color: rgba(83, 90, 244, 1);">下架完成</span>
                </el-button>
              </el-popconfirm>
            </template>
          </div>
          <div v-else>
            <el-button size="mini" type="text" @click="handleDelete(scope.row)"
              v-hasPermi="['business:handleAccount:question']">
              <span style="color: rgba(83, 90, 244, 1);">转问题</span>
            </el-button>
            <el-divider direction="vertical"></el-divider>
            <template>
              <el-popconfirm title="您确定上架吗？" @confirm="handleDelist(scope.row)">
                <el-button slot="reference" size="mini" type="text" v-hasPermi="['business:handleAccount:putshelves']">
                  <span style="color: rgba(83, 90, 244, 1);">上架完成</span>
                </el-button>
              </el-popconfirm>
            </template>
            <el-divider direction="vertical"></el-divider>
            <el-button size="mini" type="text" @click="handleUpdate(scope.row, '修改上架编号')"
              v-hasPermi="['business:handleAccount:update']">
              <span style="color: rgba(83, 90, 244, 1);">编辑</span>
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination class="pagination" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" @pagination="getList('')" />

    <!-- 新增账号对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="myfroms">
        <div class="mytxt">
          <el-row>
            <el-col :span="8">
              <el-form-item label="游戏品类" prop="dictCodeId">
                <el-select filterable :disabled="disabled" v-model="form.dictCodeId" placeholder="请选择游戏品类"
                           @change="handleGameCategoryChange">
                  <el-option v-for="(item, indx) in gameList" :key="indx" :label="item.dictLabel"
                             :value="item.dictCode"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="区服" prop="region">
                <el-select filterable :disabled="disabled" v-model="form.region" placeholder="请选择区服">
                  <el-option v-for="item in regionalServers" :key="item.gameField" :label="item.gameField"
                             :value="item.gameField"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8" >
              <el-form-item label="回收编号" prop="orderNumber" v-if="form.supplier=='自营' || form.supplier ==null">
                <el-input :disabled="disabled" v-model="form.orderNumber" placeholder="请输入回收编号"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="账号" prop="account">
                <el-input :disabled="disabled" v-model="form.account" placeholder="请输入账号"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="密码" prop="password">
                <el-input :disabled="disabled" v-model="form.password" placeholder="请输入密码"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="回收渠道" prop="recycleChannelId" v-if="form.supplier=='自营' || form.supplier ==null ">
                <el-select filterable :disabled="disabled" v-model="form.recycleChannelId" placeholder="请选择回收渠道">
                  <el-option v-for="  item   in   recycleChannelList  " :key="item.dictCode" :label="item.dictLabel"
                             :value="item.dictCode"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="账号描述" prop="accountDescription">
                <el-input :disabled="disabled" type="textarea" :autosize="{ minRows: 4, maxRows: 5 }"
                          v-model="form.accountDescription" placeholder="请输入账号描述"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-button :disabled="!form.accountDescription || !form.dictCodeId" type="primary" plain
                           @click="handleDealAccounts('accountDescription')">自动识别
                </el-button>
                <el-button :disabled="!form.dictCodeId" type="primary" plain
                           :loading="loading" @click="getWzpfs">皮肤获取
                </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="副标题" prop="description">
                <el-input :disabled="disabled" type="textarea" :autosize="{ minRows: 4, maxRows: 5 }"
                          v-model="form.description" placeholder="请输入副标题"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="回收金额" prop="recycleAmount" v-if="form.supplier=='自营' || form.supplier ==null">
                <el-input :disabled="disabled" v-model="form.recycleAmount" placeholder="请输入回收金额"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="销售金额" prop="saleAmount">
                <el-input :disabled="disabled" v-model="form.saleAmount" placeholder="请输入销售金额"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="绑定类目" prop="bindingChannelId" v-if="form.supplier=='自营' || form.supplier ==null">
                <el-select filterable :disabled="disabled" @change="changeChannel" v-model="form.bindingChannelId"
                           placeholder="请选择绑定类目">
                  <el-option v-for="  item   in   bindingChannelList  " :key="item.dictCode" :label="item.dictLabel"
                             :value="item.dictCode"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="绑定手机" prop="phoneName"   v-if="form.supplier=='自营' || form.supplier ===null">
                <el-select filterable :disabled="disabled" @change="changePhone" filterable v-model="form.phoneId"
                           placeholder="请选择绑定手机">
                  <el-option v-for="(item, indx) in phoneList" :key="indx" :label="item.phoneNumber"
                             :value="item.phoneId"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="手机编号" prop="phoneCode"  v-if="form.supplier=='自营' || form.supplier ==null">
                <el-input disabled v-model="form.phoneCode" placeholder="请先选择绑定手机号"/>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="换绑客服" prop="changeId"  v-if="form.supplier=='自营' || form.supplier ==null">
                <el-select filterable :disabled="disabled" v-model="form.changeId" placeholder="请选择换绑客服">
                  <el-option v-for=" item in changeList" :key="item.userId" :label="item.userName"
                             :value="item.userId"/>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="回收客服" prop="recycleId"  v-if="form.supplier=='自营' || form.supplier ==null">
                <el-select filterable :disabled="disabled" v-model="form.recycleId" placeholder="请选择回收客服">
                  <el-option v-for="item in recycleList" :key="item.userId" :label="item.userName"
                             :value="item.userId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input :disabled="disabled" type="textarea" :autosize="{ minRows: 4, maxRows: 5 }"
                          v-model="form.remark" placeholder="请输入备注"/>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="上架编号" prop="shelfNumber">
                <el-input :disabled="disabled" type="textarea" :autosize="{ minRows: 4, maxRows: 5 }"
                          v-model="form.shelfNumber" placeholder="请输入上架编号"/>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="通用图片">
                <el-row>
                  <el-col :span="3" v-for="(item, indx) in form.imagess" :key="indx">
                    <div class="show-img">
                      <i class="el-icon-error icon" @click="handleDel(indx,'imagess')"/>
                      <el-image style="width:100%;height:100%;" :src="item" :preview-src-list="form.imagess"/>
                    </div>
                  </el-col>

                  <el-col :span="3" v-if="!disabled">
                    <div class="wrap">
                      <el-upload :action="imgUrl + '/common/upload'" :show-file-list="false" multiple
                                 :on-success="handleSuccess" :before-upload="beforeAvatarUpload">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="螃蟹图片">
                <el-row>
                  <el-col :span="3" v-for="(item, indx) in form.pxImagess" :key="indx">
                    <div class="show-img">
                      <i class="el-icon-error icon" @click="handleDel(indx,'pxImagess')"/>
                      <el-image style="width:100%;height:100%;" :src="item" :preview-src-list="form.pxImagess"/>
                    </div>
                  </el-col>

                  <el-col :span="3" v-if="!disabled">
                    <div class="wrap">
                      <el-upload :action="imgUrl + '/common/upload'" :show-file-list="false" multiple
                                 :on-success="handleSuccess2" :before-upload="beforeAvatarUpload">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="盼之图片">
                <el-row>
                  <el-col :span="3" v-for="(item, indx) in form.pzImagess" :key="indx">
                    <div class="show-img">
                      <i class="el-icon-error icon" @click="handleDel(indx,'pzImagess')"/>
                      <el-image style="width:100%;height:100%;" :src="item" :preview-src-list="form.pzImagess"/>
                    </div>
                  </el-col>

                  <el-col :span="3" v-if="!disabled">
                    <div class="wrap">
                      <el-upload :action="imgUrl + '/common/upload'" :show-file-list="false" multiple
                                 :on-success="handleSuccess3" :before-upload="beforeAvatarUpload">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="mystatu">
          <p v-if="form.dictCodeId">属性信息</p>

          <div v-for="(child, ii) in result" :key="ii" class="render" v-if="form.dictCodeId">
            <!--下拉框-->
            <el-form-item v-if="child.fieldType === 'select' && child && child.children && child.children.length > 0"
                          :label="child.gameField" :prop="'dropDown_' + child.id"
                          :rules="{ required: child.isRequired == 1 ? true : false, message: child.gameField + '不能为空', trigger: 'change' }">
              <el-select filterable :disabled="disabled" v-model="form['dropDown_' + child.id]">
                <el-option v-for="(item, indx) in child.children" :key="indx" :label="item.gameField"
                           :value="parseInt(item.id)"/>
              </el-select>
            </el-form-item>

            <!--输入框-->
            <div style="display: flex; flex-wrap: wrap; gap: 10px;" class="yingdi_input"
                 v-if="child && child.fieldType === 'input' && child.children && child.children.length > 0">
              <el-form-item v-for="item in child.children" :key="item.id" :label="item.gameField"
                            :prop="'inputValues_' + item.id"
                            :rules="{ required: child.isRequired == 1 ? true : false, message: item.gameField + '不能为空', trigger: 'blur' }">
                <el-input :disabled="disabled" placeholder="请输入" v-model="form['inputValues_' + item.id]"></el-input>
              </el-form-item>
            </div>

            <!--radio 单选框-->
            <el-form-item v-if="child.fieldType === 'radio' && child && child.children && child.children.length > 0"
                          :label="child.gameField" :prop="'radioValues_' + child.id"
                          :rules="{ required: child.isRequired == 1 ? true : false, message: child.gameField + '不能为空', trigger: 'change' }">
              <el-radio-group :disabled="disabled" v-model="form['radioValues_' + child.id]">
                <el-radio v-for="option in child.children" :key="option.id" :label="option.id">
                  {{ option.gameField }}
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <!--checkbox 多选框-->
            <el-form-item v-if="child && child.fieldType === 'checkbox' && child.children" :label="child.gameField"
                          :prop="'checkbox_' + child.gameKey"
                          :rules="[{ type: 'array', required: child.isRequired == 1 ? true : false, message: '请至少选择一个' + child.gameField, trigger: 'change' }]">
              <el-checkbox-group v-model="form['checkbox_' + child.gameKey]"
                                 v-if="child.gameKey && form['checkbox_' + child.gameKey]">
                <el-checkbox :disabled="disabled" v-for="(item, indx) in child.children" :key="indx" :label="item.id">
                  {{ item.gameField }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" style="padding-top: 0;padding-bottom: 15px;">
        <el-button @click="cancel">取 消</el-button>
        <el-button v-if="!disabled && (form.supplier==='自营' ||form.supplier===null )" type="primary" @click="submitForm('mark')">确 定</el-button>
        <el-button v-if="!disabled && (form.supplier!='自营' && form.supplier !==null)" type="primary" @click="submitForm('supplier')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 提号对话框 -->
    <el-dialog title="提号" :visible.sync="openNotation" width="400px" append-to-body :close-on-click-modal="false">
      <el-form ref="formNotation" :model="formNotation" :rules="rules" label-width="120px">

        <el-form-item label="销售渠道：" prop="saleChannelId">
          <el-select filterable v-model="formNotation.saleChannelId" placeholder="请选择销售渠道">
            <el-option v-for="item in saleChannelList" :key="item.dictCode" :label="item.dictLabel"
              :value="item.dictCode"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="销售编号：" prop="saleId">
          <el-input v-model="formNotation.saleId" placeholder="请输入销售编号" />
        </el-form-item>

        <el-form-item label="销售金额：" prop="saleAmount">
          <el-input v-model="formNotation.saleAmount" placeholder="请输入销售金额" />
        </el-form-item>

        <el-form-item label="订单备注：" prop="orderRemark">
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="formNotation.orderRemark"
            placeholder="请输入订单备注" />
        </el-form-item>

        <el-form-item label="销售客服：" prop="salesCustomerId">
          <el-select filterable v-model="formNotation.salesCustomerId" placeholder="请选择销售客服">
            <el-option v-for=" item  in  sellList " :key="item.userId" :label="item.userName"
              :value="item.userId"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormNotation">确 定</el-button>
        <el-button @click="cancelNotation">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 转问题对话框 -->
    <el-dialog title="转问题" :visible.sync="openProblem" width="480px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="formNotation" :rules="rules" label-width="100px">
        <el-form-item label="问题类型：" prop="problemType">
          <el-select filterable v-model="formNotation.problemType" placeholder="请选择问题类型">
            <el-option label="未售找回" value="UnsoldRecovered"></el-option>
            <el-option label="未售异常" value="UnsoldException"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="异常原因：" prop="abnormityReason">
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="form.abnormityReason"
            placeholder="请输入异常原因" />
        </el-form-item>

        <el-form-item label="上传截图：" prop="upload">
          <el-upload class="avatar-uploader" :action="$baseURL + '/common/upload'" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="form.images" :src="formNotation.images" class="avatar"> <i v-else
              class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancelProblem">取 消</el-button>
        <el-button type="primary" @click="submitFormProblem">确 定</el-button>
      </div>
    </el-dialog>

    <!--自动上架-->
    <el-dialog title="自动上架" :visible.sync="shelveOpen" width="480px" append-to-body :close-on-click-modal="false">
      <div style="text-align: center;"> <!-- 添加这个容器并设置居中 -->
        <el-progress type="circle" :percentage="progress"></el-progress>
        <div>{{ JSON.stringify(progressMsg) }}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import ShelfNumberRow from '@/components/ShelfNumberRow.vue';
import {
  notation,
  count,
  updateStock,
  listManagement,
  supplierUpdate,
  updateStatus,
  addManagement,
  upandDownShelves,
  bulkListings,
  bulkDelisting,
  getProgress
} from "@/api/business/processed";
import { getGameDict } from '@/api/business/recyleGameDict.js';
import { pushAdd, pushDele } from '@/api/business/api.js'
import { updateManagement, unboundPhonesByCategory } from "@/api/business/staylnventory";
import { getInfo, listDict } from '@/api/business/gameDict.js';
import env from "@/utils/config.js";
import { myMixins } from "@/mixins/index.js";
import { getSkin } from "@/api/business/staylnventory";

export default {
  name: "Management",
  mixins: [myMixins],
  components: { ShelfNumberRow },
  data() {
    return {
      progressMsg: {},
      progress: 0,
      shelveOpen: false, // 批量
      currentSelection: [],
      inputValues: [],
      //区服列表
      regionalServers: [],
      // 单选
      radioSelections: {},
      // 多选
      checkList: [],
      // 下拉
      dropDown: [],
      // 属性配置回显
      result: [],
      imgUrl: '',//上传图片地址
      //当前绑定的手机号和渠道
      bindingChannelId: '',
      phoneData: {
        phoneCode: null,
        phoneId: null,
        phoneNumber: null
      },
      //角标数据
      totalCount: {},
      //销售渠道
      saleChannelList: [],
      //库存状态列表
      stockStatusList: [],
      //绑定手机列表
      phoneList: [],
      //换绑客服
      changeList: [],
      //回收客服
      recycleList: [],
      //销售客服
      sellList: [],
      //二次实名
      secondaryRealNameList: [],
      //回收列表
      recycleChannelList: [],
      //渠道列表
      bindingChannelList: [],
      //区服列表
      regionList: [],
      //游戏列表
      gameList: [],
      activeGame: '',
      activeListing: 'PendingForShelf',
      // 遮罩层
      loading: false,
      // 选中数组
      idHandle: [{
        id: null,
        handle: null
      }],
      selectRows: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      managementList: [
        {}
      ],
      // 弹出层标题
      title: "",
      // 是否显示新增弹出层
      open: false,
      // 是否显示提号弹出层
      openNotation: false,
      // 是否显示转问题弹出层
      openProblem: false,
      // 查询参数
      queryParams: {
        dictCodeId: '',
        pageNum: 1,
        pageSize: 10,
        phoneNumber: null,
        accountDescription: null,
        account: null,
        recycleChannelId: null,
        orderNumber: null,
        status: null,
        handle: '',
        shelfNumber: ''
      },
      // 表单参数
      form: {},
      // 提号表单参数
      formNotation: {},
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.imgUrl = env;
    this.getList();
    //查询游戏列字典
    this.getDicts('game_category').then(res => {
      this.gameList = res.data
    })
    //查询绑定渠道字典
    this.getDicts('binding_channel').then(res => {
      this.bindingChannelList = res.data
    })
    //查询回收渠道字典
    this.getDicts('recycle_channel').then(res => {
      this.recycleChannelList = res.data
    })
    //查询二次实名字典
    this.getDicts('secondary_real_name').then(res => {
      this.secondaryRealNameList = res.data
    })
    //查询状态字典
    this.getDicts('stock_status').then(res => {
      this.stockStatusList = res.data
    })
    //查询销售渠道
    this.getDicts('sale_channel').then(res => {
      this.saleChannelList = res.data
    })
    //查询回收客服
    this.passPost('recycle').then(res => {
      this.recycleList = res.data
    })
    //查询换绑客服
    this.passPost('change').then(res => {
      this.changeList = res.data
    })
    //查询销售客服
    this.passPost('sell').then(res => {
      this.sellList = res.data
    })
  },

  methods: {
    // 添加待处理
    handleDealAccounts(type) {
      if (this.result.length > 0) {
        this.result.map(item => {
          if (item.fieldType == 'checkbox' && item.children && item.children.length > 0) {
            let children = item.children;
            children.map(ii => {
              if (this.form[type] && this.form[type].indexOf(ii.gameField) > -1) {
                if (this.form['checkbox_' + item.gameKey] && !this.form['checkbox_' + item.gameKey].includes(ii.id)) {
                  this.form['checkbox_' + item.gameKey].push(ii.id);
                }
              }
            })
          }
        })
      }
    },

    // 营地id查询
    getWzpfs() {
      // 获取营地id
      let that = this;
      const inputs = document.getElementsByClassName("yingdi_input");
      for (let i = 0; i < inputs.length; i++) {
        const labelText = inputs[i].getElementsByTagName('label')[0].innerHTML;
        if (labelText == '营地ID') {
          const val = inputs[i].getElementsByTagName("input")[0].value;
          if (val) {
            that.loading = true;
            getSkin(val).then(res => {
              this.loading = false;
              if (res.code == 200) {
                that.form.description = res.msg;
                that.handleDealAccounts('description');
              } else {
                that.$message.error(res.msg);
              }
            }).catch(() => {
              that.loading = false;
            })
          }
        }
      }
    },

    // 复制
    handleCopy(e) {
      if (e) {
        const el = document.createElement('textarea');
        el.value = e;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        // 通知用户已复制
        this.$message({
          message: '复制成功！',
          type: 'success'
        });
      }
    },


    // api上架
    apiPushAdd() {
      let ids = this.selectRows.map(i => i.id);
      if (ids.length == 0) return this.$message.error('请选择一条记录！');
      pushAdd(ids).then(res => {
        if (res.code == 200) {
          this.$message.success('上架完成');
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      });
    },

    // 批量上架
    patchUp() {
      this.progressMsg = {}
      this.shelveOpen = true
      this.progress = 0;
      if (this.selectRows.length == 0) return this.$message.error('请至少选择一条数据！');
      let ids = this.selectRows.map(i => i.id);
      bulkListings(ids).then(res => {
        if (res.code == 200) {
          // this.$message.success('批量上架成功！');
          // this.getList();
          let taskId = res.msg;
          this.startProgressPolling(taskId);
        } else {
          this.$message.error(res.message);
        }
      })
    },

    startProgressPolling(taskId) {
      const intervalId = setInterval(() => {
        getProgress(taskId).then(response => {
          this.progress = response.data.progress; // 更新进度
          let progressMsg = response.data.message
          if (this.progress >= 100) {
            clearInterval(intervalId); // 如果进度达到 100%，停止轮询
            this.progressMsg = response.data.message
          }
        }).catch(error => {
          clearInterval(intervalId); // 发生错误时停止轮询
        });
      }, 100); // 每秒钟轮询一次
    },

    // 批量下架
    patchDown() {
      if (this.selectRows.length == 0) return this.$message.error('请至少选择一条数据！');
      let ids = this.selectRows.map(i => i.id);
      bulkDelisting(ids).then(res => {
        if (res.code == 200) {
          this.$message.success('批量下架成功！');
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      })
    },
    // 复制成功提示
    clipboardSuccess() {
      this.$message.success('复制成功！');
    },

    // 删除照片
    handleDel(indx, type) {
      this.form[type].splice(indx, 1);
    },

    // 后边添加上传图片
    handleSuccess(res, file, fileList) {
      if (!this.form.hasOwnProperty('imagess')) {
        this.$set(this.form, 'imagess', new Array());
      }
      if (!this.form.imagess) {
        this.form.imagess = [];
      }
      this.form.imagess.push(res.url);
    },

    // 后边添加上传图片
    handleSuccess2(res, file, fileList) {
      this.form.pxImagess.push(res.url);
    },

    // 后边添加上传图片
    handleSuccess3(res, file, fileList) {
      this.form.pzImagess.push(res.url);
    },

    updateRadioSelection(childId, value) {
      this.$set(this.radioSelections, childId, value);
    },

    initializeFormWithSelections() {
      this.currentSelection.forEach((selection, index) => {
        switch (selection.fieldType) {
          case 'select':
            this.$set(this.dropDown, parseInt(selection.tgameDict), parseInt(selection.tgameDictId))
            break
          case 'input':
            this.$set(this.inputValues, selection.tgameDict, selection.value);
            break
          case 'radio':
            this.$set(this.radioSelections, parseInt(selection.tgameDict), parseInt(selection.tgameDictId))
            break
          case 'checkbox':
            if (Array.isArray(this.checkList)) {
              this.checkList.push(parseInt(selection.tgameDict));
            }
            break;
        }
      })
    },

    handleGameCategoryChange() {
      this.regionalServers = []
      let queryParams = {
        dictCodeId: this.form.dictCodeId
      }
      this.listDictData(queryParams)
    },

    /**
     * 一键上
     */
    upandDownShelves() {
      if (this.selectRows.length == 0) return this.$message.error('请至少选择一条数据！');
      let ids = this.selectRows.map(i => i.id);
      upandDownShelves(ids).then(
        res => {
          if (res.code == 200) {
            this.$message.success('上架完成');
            this.getList();
          } else {
            this.$message.error(res.message);
          }
        }
      )
    },

    handleAvatarSuccess(response, file) {
      // 假设服务器响应的数据中包含了文件路径 'url'
      this.$nextTick(() => {
        // 这里放置您想要在1秒后执行的代码
        console.log('这段代码在1秒后执行');
        this.formNotation.images = response.url; // 更新 form.image 为服务器返回的 URL
      });
    },

    beforeAvatarUpload(file) {
      const isJPEG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const jsJPG = file.type === 'image/jpg'
      // const isLt2M = file.size / 1024 / 1024 < 10
      if (!isJPEG && !isPNG && !jsJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
        return false
      }
      return true;
    },

    //下架完成
    handleDelist(row) {
      updateStatus(row.id, row.handle, row.version)
        .then(res => {
          this.$message.success('成功')
          this.getList()
        })
    },

    //选中分类事件
    changeChannel(value) {
      this.form.phoneId = null
      this.form.phoneCode = null
      this.bindingChannelList.forEach(item => {
        if (item.dictCode == value) {
          unboundPhonesByCategory(item.dictValue)
            .then(res => {
              this.phoneList = res.data
              if (this.bindingChannelId == value) {
                this.phoneList.unshift(this.phoneData)
              }
            })
          return
        }
      })
    },

    //选中手机事件
    changePhone(value) {
      this.phoneList.forEach(item => {
        if (item.phoneId == value) {
          this.form.phoneCode = item.phoneCode
          this.form.phoneId = item.phoneId
        }
      })
    },

    //切换上架Tab
    handleListing(tab, event) {
      this.queryParams.handle = tab;
      this.getList(1)
    },

    /** 查询列表 */
    getList(num) {
      if (num) this.queryParams.pageNum = num;
      this.loading = true;
      let obj = {
        handle: this.queryParams.handle ? this.queryParams.handle : 'PendingForShelf'
      }
      count(obj).then(res => {
        this.totalCount = res.data
      })
      this.queryParams.handle = this.queryParams.handle ? this.queryParams.handle : 'PendingForShelf';
      listManagement(this.queryParams).then(response => {
        this.managementList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    //新增 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    //新增 表单重置
    reset() {
      this.form = {
        phoneId: null,
        phoneCode: null,
        imagess: [],
        checkList: []
      };
      this.resetForm("form");
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增账号";
    },

    /** 新增 确认提交 */
    submitForm(text) {
      let dropDownMap = {}, inputValuesObj = {}, radioSelectionsObj = {}, info = {}, checkboxArr = [];
      for (var key in this.form) {
        // 下拉框
        if (key.indexOf('dropDown') > -1) {
          dropDownMap[key.split('_')[1]] = this.form[key];
        }

        // 输入框
        if (key.indexOf('inputValues') > -1) {
          inputValuesObj[key.split('_')[1]] = this.form[key]
        }

        // 单选框
        if (key.indexOf('radioValues') > -1) {
          radioSelectionsObj[key.split('_')[1]] = this.form[key]
        }

        // 多选框
        if (key.indexOf('checkbox') > -1) {
          info[key] = this.form[key];
          checkboxArr = checkboxArr.concat(this.form[key]);
        }
      }

      let attr = {
        radioSelections: radioSelectionsObj,
        dropDown: dropDownMap,
        inputValues: inputValuesObj,
        checkbox: info,
        checkList: checkboxArr
      };

      this.form.attribute = attr;
      this.form.answer = JSON.stringify(attr);

      if (this.form.id != null) {
        this.$refs['form'].validate(valid => {
          if (valid) {
            if (text == 'mark') {
              updateStock(this.form).then(response => {
                this.$modal.msgSuccess('操作成功')
                this.open = false
                this.openProblem = false
                this.getList()
              })
            } else if (text == 'supplier') {
              supplierUpdate(this.form).then(response => {
                this.$modal.msgSuccess('操作成功')
                this.open = false
                this.openProblem = false
                this.getList()
              })
            }
          }
        })

      } else {
        this.$refs["form"].validate(valid => {
          if (valid) {
            addManagement(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        });
      }
    },

    //提号 取消按钮
    cancelNotation() {
      this.openNotation = false;
      this.resetNotation();
    },

    //提号 表单重置
    resetNotation() {
      this.formNotation = {};
      this.resetForm("formNotation");
    },

    /** 提号按钮操作 */
    handleNotation(row) {
      this.resetQuery();
      const id = row.id
      this.openNotation = true
      this.formNotation = {
        saleAmount: row.saleAmount,
        id
      }
    },

    /** 提号 确认提交 */
    submitFormNotation() {
      this.$refs["formNotation"].validate(valid => {
        if (valid) {
          notation(this.formNotation).then(response => {
            this.$modal.msgSuccess("提号成功");
            this.openNotation = false;
            this.getList();
          });
        }
      });
    },

    //转问题 取消按钮
    cancelProblem() {
      this.openProblem = false;
      this.resetProblem();
    },

    //转问题 表单重置
    resetProblem() {
      this.formProblem = {};
      this.resetForm("formProblem");
    },

    /** 转问题按钮操作 */
    handleDelete(row) {
      this.resetQuery();
      this.formNotation = { ...row }
      this.openProblem = true
    },

    /** 转问题 确认提交 */
    submitFormProblem() {
      updateManagement(this.formNotation).then(response => {
        this.$modal.msgSuccess("操作成功");
        this.open = false;
        this.openProblem = false;
        this.getList();
      });
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.getList(1);
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectRows = selection;
      this.single = selection.length !== 1
      this.multiple = !selection.length
      this.idHandle = selection
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('business/stock/export', {
        ...this.queryParams
      }, `management_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  background: #F3F5FF;
  padding: 30px;

  /*搜索*/
  .start {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;

    ::v-deep.el-form {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 20px 20px 10px 20px;
      background: #3A84FF;

      .el-form-item {
        margin-bottom: 0 !important;
      }

      .switch {
        width: 110px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        color: #fff;
        font-size: 14px;
        font-family: Source Han Sans;
        font-weight: normal;
        user-select: none;
        cursor: pointer;
        margin-bottom: 10px;
      }

      .active {
        border-radius: 8px;
        background: #FEFEFE;
        color: #2376FE;
      }
    }

    .btns {
      display: flex;

      ::v-deep.el-button {
        background-color: #fff;
        margin-left: 12px;
        color: #3380FD;

        .el-icon-plus {
          &::after {
            content: "";
            font-weight: bold;
          }
        }
      }

      .wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 38px;
        border-radius: 8px;
        background: #FFFFFF;
        border: 1px solid #116BFF;
        margin-left: 12px;
      }
    }

    /*radio*/
    .el-radio-group {
      width: 100%;
      padding: 20px 20px 10px;
      background: rgba(255, 255, 255, 0.7);

      .el-radio {
        margin-bottom: 8px;
      }

      ::v-deep.el-radio__inner {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        background: #FAFBFC;
        border: 1px solid #D8E4EF;
        overflow: hidden;
        text-align: center;
        line-height: 32px;

        &::after {
          content: "☑️";
          display: block;
          color: #1890FF;
          font-size: 20px;
          width: 30px;
          height: 30px;
          background: #fff;
        }
      }
    }
  }

  .tool {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .tag {
      font-size: 18px;
      color: rgba(17, 38, 60, 1);
      border-left: 3px solid rgba(84, 91, 245, 1);
      padding-left: 10px;
    }

    .tool-btn {
      display: flex;

      .tool-btn-item {
        width: 96px;
        height: 36px;
        line-height: 36px;
        border-radius: 8px;
        background: #FFFFFF;
        border: 1px solid #116BFF;
        font-family: Source Han Sans;
        font-size: 14px;
        font-weight: normal;
        text-align: center;
        color: #2376FE;
        cursor: pointer;

        &:hover {
          background: rgba(17, 107, 255, .01);
        }
      }
    }
  }

  /*标题*/
  p {
    font-size: 16px;
    font-weight: 500;
    color: rgba(17, 38, 60, 1);
    border-left: 4px solid #116BFF;
    padding-left: 10px;
    margin-bottom: 20px;
    line-height: normal;
  }

  /*列表*/
  ::v-deep.el-table {
    border-radius: 16px;

    th {
      height: 50px;
      background: #488DFE;
      font-family: Source Han Sans SC;
      font-size: 14px;
      color: #fff;
      font-weight: normal;
      border-right: 1px solid #E2E6F5;
    }

    td {
      height: 50px;
      font-family: Source Han Sans SC;
      font-size: 14px;
      color: #3D3D3D;
      font-weight: normal;
      border-right: 1px solid #E2E6F5;
    }

    .el-table__body tr {
      &:nth-child(odd) {
        background-color: #FEFEFE;
      }

      &:nth-child(even) {
        background-color: #F8FAFE;
      }
    }

    .el-table__body-wrapper {
      &::-webkit-scrollbar {
        height: 10px;
      }

      &::-webkit-scrollbar-track {
        background-color: #E4E8F5;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #3380FD;
      }
    }

    .status {
      display: block;
      width: 54px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      opacity: 0.8;
      border-radius: 4px;
      font-size: 12px;
      transition: opacity 0.3s ease-in-out;
    }

    .normal {
      color: #00B3A7;
      background-color: #E0F7FA;
    }

    .tradingIn {
      color: #FFA500;
      background-color: #ffeac9;
    }

    .soldOut {
      color: #FF0000;
      background-color: #ffdada;
    }

    .abnormal {
      color: #FF00FF;
      background-color: #FFE4FF;
    }

    .cancelled {
      color: #a19f9f;
      background-color: #ececec;
    }
  }

  /*分页*/
  .pagination {
    height: 44px;
    margin-top: 20px;
    background-color: transparent !important;
    padding: 0 !important;
    margin-bottom: 0;

    ::v-deep.el-pagination {
      display: flex;
      align-items: center;

      .number {
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        border-radius: 8px;
      }

      .el-pager>.el-icon {
        height: 40px;
        width: 40px;
        background: #fff;
        line-height: 40px;
        border-radius: 8px;
      }
    }
  }
}

::v-deep .el-dialog {
  width: 849px;
  opacity: 1;
  border-radius: 30px;
  background: rgba(255, 255, 255, 1);

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  p {
    font-size: 18px;
    color: rgba(17, 38, 60, 1);
    border-left: 3px solid rgba(84, 91, 245, 1);
    padding-left: 10px;
    margin-bottom: 15px;
    margin-left: 0;
  }

  .el-input {
    width: 165px;

    .el-input__inner {
      width: 165px;
      border: 1px solid rgba(127, 127, 213, 0.5);
      border-radius: 10px;
    }
  }

  .el-input-number {
    width: 165px;

    .el-input {
      width: 165px;

      .el-input__inner {
        width: 165px;
        border: 1px solid rgba(127, 127, 213, 0.5);
        border-radius: 0px;
      }
    }
  }

  .el-dialog__title {
    border-left: 3px solid rgba(84, 91, 245, 1);
    padding-left: 8px;
  }
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #c1c1c1;
  width: 100%;
  height: 90px;

  div {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  ::v-deep.el-upload {
    width: 100%;
    height: 100%;
  }

  .avatar-uploader-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
}

.show-img {
  position: relative;
  display: flex;
  margin-right: 8px;
  height: 90px;

  .icon {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 20px;
    z-index: 1;
    cursor: pointer;
  }
}
</style>
